import React from 'react';
import { Routes, Route, Navigate, useNavigate } from 'react-router-dom';
import {
  Layout,
  Button,
  Space,
  Typography
} from 'antd';
import {
  SettingOutlined,
  SearchOutlined,
  HomeOutlined
} from '@ant-design/icons';

// 导入页面组件
import ProductSearch from '../pages/client/ProductSearch';
import ProductDetail from '../pages/client/ProductDetail';

const { Header, Content, Footer } = Layout;
const { Title } = Typography;

const ClientLayout = () => {
  const navigate = useNavigate();

  const handleGoToAdmin = () => {
    navigate('/admin');
  };

  return (
    <Layout className="client-layout">
      <Header style={{ 
        background: '#fff', 
        padding: '0 24px',
        boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center'
      }}>
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <HomeOutlined style={{ fontSize: 24, marginRight: 12, color: '#1890ff' }} />
          <Title level={3} style={{ margin: 0, color: '#1890ff' }}>
            电商数据分析平台
          </Title>
        </div>
        <Space>
          <Button 
            type="primary" 
            icon={<SettingOutlined />}
            onClick={handleGoToAdmin}
          >
            管理后台
          </Button>
        </Space>
      </Header>
      
      <Content style={{ padding: '24px', minHeight: 'calc(100vh - 134px)' }}>
        <Routes>
          <Route path="/" element={<Navigate to="/client/search" replace />} />
          <Route path="/search" element={<ProductSearch />} />
          <Route path="/product/:id" element={<ProductDetail />} />
        </Routes>
      </Content>
      
      <Footer style={{ 
        textAlign: 'center', 
        background: '#f0f2f5',
        borderTop: '1px solid #d9d9d9'
      }}>
        电商数据分析平台 ©2024 Created by ES Demo
      </Footer>
    </Layout>
  );
};

export default ClientLayout;